<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>课程练习</title>
    <%--导入layer--%>
    <script src="../jQuery/jquery-1.11.2.js"></script>
    <script src="../layer/layer/layer.js"></script>
    <!--导入layui-->
    <link rel="stylesheet" href="../layui/layui/css/layui.css">
    <script src="../layui/layui/layui.js" charset="utf-8"></script>

    <style>
        #btn4{
            margin-left: 60%;
            margin-top: -8%;
        }
        #btn1{
            margin-top: 26px;
            margin-left: 200px;
        }
        #btn2{
            margin-top: -44px;
            margin-left: 400px;
        }

        #btn4{
            margin-top: -44px;
            margin-left: 800px;
        }
        #btn3{
            margin-top: -44px;
            margin-left: 600px;
        }
        #title{
            margin-top: 50px;
            margin-left:200px;
            width: 800px;
            height: 10%;
            border-bottom: 1px solid gray;
        }

        #Ranswer{
            width: 200px;
            height: 80px;
        }

    </style>
</head>
<body style="background-color: #DCE9FF">
<div style="width: 100%;height: 720px;">
    <div style="width: 65%;height: 100%;left: 15%;">
        <!--显示题目数层-->
        <div id="title">
                 <span style="font-size: 30px;top: 40%;" id="SubTypeAndCount">单选题/第<span style="font-size: 25px" id="Number"></span>题</span>

        </div>
        <!--题目层-->
        <div style="width: 100%;height: 20%;top: 20%;margin-left:200px;overflow: auto;scrollbar-width: none;">
            <span style="font-size: 35px" id="serialNumber"></span><span style="font-size: 25px;"id="stem"></span>
        </div>
        <!--选项层-->
            <div style="scrollbar-width: none;position: relative;left: 20%;" id="divs">
                    <span style="font-size: 25px;"id="option">

                    </span>
            </div>
        <div id="Ranswer" style="margin-left:200px;margin-top:50px;">
                <span style="font-size: 20px;color:green;">正确答案：</span>
                <span id="rightText"></span>
        </div>
        <div style="width:800px;margin-left:200px;margin-top:50px;border-bottom: 1px solid gray;">

        </div>
        <!--换题按钮层-->
        <!--上一题-->
        <div id="btn1">
            <button style="width: 110px;height: 45px;" class="layui-btn layui-btn-lg layui-btn-normal" id="ForeSubject">上一题</button>
        </div>
        <!--下一题-->
        <div id="btn2">
            <button style="width: 110px;height: 45px;" class="layui-btn layui-btn-lg layui-btn-normal" id="BackSubject">下一题</button>
        </div>
        <!--正确答案-->
        <div id="btn3">
            <button class="layui-btn layui-btn-warm layui-btn-lg" id="clickOk">正确答案</button>
        </div>
        <!--退出练习-->
        <div id="btn4">
            <button class="layui-btn layui-btn-warm layui-btn-lg" id="a4"  >退出练习</button>
        </div>
    </div>

</div>
<script>

    //定义一个显示当前位置的变量
    var nowNum=0;
    //定义一个保存所选值的数组
    var arr=new Array();

    //定义一个保存题目的变量
    var datas;
    //定义一个保存所选值的数组
    var correctArr=new Array();
    //调用显示题目函数，也就是刚加载时要显示题目
    showSubject(nowNum);
    //定义一个保存最多题目的变量
    var max=0;
    //显示题目
    function showSubject(count){
        var couseId=1;
        //获取题目的ajax
        $.ajax({
            url:"../CourseSubjectServlet?method=findSubjects",
            type:"POST",
            data:"",
            success:function(data){
                data=$.parseJSON(data);
                //将题目保存到data中
                datas=data;
                //调用保存题目的函数
                saveSub(count);
                //将题目的最大数量赋值给题目变量
                max=datas.data.length;
                //遍历获得正确答案，将正确答案保存到数组当中
                for (var i=0;i<datas.data.length;i++){
                    correctArr[i]=datas.data[i].correct;
                }
            }
        });
    }

    //保存所有题目的函数
    function saveSub(count){
        // 显示题目和答案选项
        $("#stem").html(datas.data[count].stem);
        // 调用函数获取每个选项
        var option = optionHtml(datas.data[count]);
        // 显示选项
        $("#option").html(option);
        // 判断本题是否已作答
        if (arr[nowNum] != undefined) {
            // 从数组中取出选项
            var options = (arr[nowNum].split(","))[0];
            // 循环遍历所有选项
            for (var i = 0; i < options.length; i++) {
                // 设置选项选中
                $("input[value='" + options.charAt(i) + "']").prop("checked", true);
            };
        };
        // 设置题号
        $("#serialNumber").text((count+1)+"、");
        if (datas.data[count].correct.length==1){
            $("#SubTypeAndCount").text("单选题/第"+(count+1)+"题");
        }else{
            $("#SubTypeAndCount").text("多选题/第"+(count+1)+"题");
        }
    };

    // 保存学员练习作答是选择答案的状态
    function saveAnswer(nowNum){
        // 获得取中的选项元素
        var checkeds=$("input[name='select']:checked");
        if(checkeds.val()!=undefined){ // 获得当前题的选择项保存到变量中
            // 保存作答的变量
            var str="";
            checkeds.each(function(){
                str=str+$(this).val();
                // alert(str.charAt(index));
            });
            arr[nowNum]=str+","+nowNum;
            //alert(arr);
        }else{// 未作答时
            // 把选择的状态变为undefind 便于后面检验答案 （未作答的算做错？）
            str=undefined;
        }
    }

    //得出每个选项字符串
    function optionHtml(data){
        //获取每个选择字符串
        var optionStr="";
        //判断单选还是多选
        if(data.correct.length==1){
            optionSet("radio");
        }else{//判断为多选题
            optionSet("checkbox");
        };

        // 选项集
        function optionSet(type) {
            // 判断值不为空
            if (data.optionA != null) {
                optionStr += "<input type='" + type + "' style='zoom: 150%;'  name='select' value='A'/>A、" + data.optionA + "<br/>";
            }
            if (data.optionB != null) {
                optionStr += "<input type='" + type + "' style='zoom: 150%;'  name='select' value='B'/>B、" + data.optionB + "<br/>";
            }
            if (data.optionC != null) {
                optionStr += "<input type='" + type + "' style='zoom: 150%;'  name='select' value='C'/>C、" + data.optionC + "<br/>";
            }
            if (data.optionD != null) {
                optionStr += "<input type='" + type + "' style='zoom: 150%;'  name='select' value='D'/>D、" + data.optionD + "<br/>";
            }
            if (data.optionE != null) {
                optionStr += "<input type='" + type + "' style='zoom: 150%;'  name='select' value='E'/>E、" + data.optionE + "<br/>";
            }
            if (data.optionF != null) {
                optionStr += "<input type='" + type + "' style='zoom: 150%;'  name='select' value='F'/>F、" + data.optionF + "<br/>";
            }
            if (data.optionG != null) {
                optionStr += "<input type='" + type + "' style='zoom: 150%;'  name='select' value='G'/>G、" + data.optionG + "<br/>";
            }
            if (data.optionH != null) {
                optionStr += "<input type='" + type + "' style='zoom: 150%;'  name='select' value='H'/>H、" + data.optionH + "<br/>";
            }
        }

        return optionStr;
    }

    // 点击下一题事件代码
    $("#BackSubject").click(function () {
        $("#rightText").html('');
        //获得选中元素
        var checkeds=$("input[name='select']:checked");
        //取得本页选择项保存到数组当中
        if(checkeds.val()!=undefined){
            var str="";
            checkeds.each(function(){
                str=str+$(this).val();
            });
            arr[nowNum]=str+","+nowNum;
        }
        if(nowNum<max-1){
            // 增加下标
            nowNum++;
            // 加载题目
            saveSub(nowNum);
        }else{
            // 提示
            layer.msg("已经是最后一题了！");
        }
    });


    $("#ForeSubject").click(function(){//判断点击的为上一题
        $("#rightText").html('');
        //获得选中元素
        var checkeds=$("input[name='select']:checked");
        //取得本页选择项保存到数组当中
        if(checkeds.val()!=undefined){
            var str="";
            checkeds.each(function(){
                str=str+$(this).val();
            });
            arr[nowNum]=str+","+nowNum;

        }
        if (nowNum>0){
            //题目位置-1
            nowNum-=1;
            //调用显示题目代码，
            saveSub(nowNum);

        }else{
            layer.msg("己经到达第一题");
        }
    });

    //点击显示正确答案
    $("#clickOk").click(function(){
        $("#rightText").html('<span style="font-size: 23px;color: red;">'+correctArr[nowNum]+'<span>');
    });

    //退出练习到首页
    $("#a4").click(function(){
        top.location.href="StudentHome.jsp";
    });



</script>
</body>
</html>

